<script setup>
import { ref, watch } from "vue";


// 预定义颜色数组
const predefineColors = ref([
  "#4E88F3",
  "#1E90FF",
  "#4E6EF2",
  "#0052D9",
  "#3FB884",
  "#16BAA9",
  "#07C160",
  "#009688",
  "#6954F0",
  "#7B40F2",
  "#F01414",
]);

const handleColorChange = (color) => {
//   appStore.themeColor = color;
//   appStore.changeColor(color);
};
// 初始化主题颜色为 store 中的 themeColor
const themeColor = ref('#F01414');

// 监听 appStore.themeColor 的变化，并更新 themeColor
// watch(
//   () => appStore.themeColor,
//   (newColor) => {
//     themeColor.value = newColor;
//   }
// );

// 监听 themeColor 的变化，并更新 appStore.themeColor
// watch(themeColor, (newColor) => {
//   appStore.themeColor = newColor;
// });
</script>
<template>
  <el-color-picker
    class="wd-color-picker tw-ml-4"
    v-model="themeColor"
    :predefine="predefineColors"
    @active-change="handleColorChange"
    popper-class="wd-color-picker"
  ></el-color-picker>
</template>
  <style lang="less">
.wd-color-picker {
  .el-color-dropdown__link-btn {
    display: none;
  }
}
</style>